<template>
	<view>
		<view
			class="variableLayout"
			:style="{
				border: parameter.borderPx * 2 + 'rpx solid ' + (parameter.borderColor || 'transparent')
			}"
		>
			<view
				v-for="(item, index) in dataList"
				:key="index"
				class="item"
				@click="goJump(item)"
				:style="{
					padding: (parameter.colSpacing || 0) * 2 + 'rpx ' + (parameter.rowSpacing || 0) * 2 + 'rpx',
					width: ((item.colSpan || 1) / (parameter.columns || 1)) * 100 + '%'
				}"
			>
				<image
					class="img"
					:src="item.image"
					:mode="parameter.itemHeight?'scaleToFill':'widthFix'"
					:style="{
						height: parameter.itemHeight?parameter.itemHeight * 2 + 'rpx' : 'auto',
						'border-radius': parameter.imgRadius * 2 + 'rpx'
					}"
				></image>
				<template v-if="parameter.showTitle === 2">
					<view v-if="parameter.titleFixed === 2" class="bot_title word">{{ item.title || item.name }}</view>
					<view v-else class="bot_title">{{ item.title || item.name }}</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
import { pageComponentsLink } from '@/utils/jump.js';
import { configMixin } from './configMixin.js';
export default {
	mixins: [configMixin],
	data() {
		return {};
	},
	methods: {
		goJump(item) {
			pageComponentsLink(item);
		}
	}
};
</script>

<style lang="scss" scoped>
.variableLayout {
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
}
.variableLayout .item {
	position: relative;
	overflow: hidden;
	width: 100%;
	display: flex;
	flex-direction: column;
}
.variableLayout .item .bot_title {
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
	line-height: 20px;
	font-size: 14px;
}
.variableLayout .item .word {
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	background: rgba(110, 87, 87, 0.5);
	color: #fff;
	text-align: left;
	padding-left: 10px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>
